const dateTitle = document.querySelector(".dateTitle")
const cancel = document.querySelector(".selected .title .cancel")
const selected = document.querySelector(".selected")
const screenMask = document.querySelector(".screenMask")
dateTitle.addEventListener("click", function () {
	selected.style.opacity = 1
	selected.style.transform = "translateY(0)"
	screenMask.style.opacity = 1
	screenMask.style.zIndex = 1
})
cancel.addEventListener("click", function () {
	selected.style.opacity = 0
	selected.style.transform = "translateY(100%)"
	screenMask.style.opacity = 0
	screenMask.style.zIndex = -1
})

/* 
    元素类名：
    @timeYM：更新日历头部的年月
    @dateList：渲染日历
*/

// 生成日历
let today = moment()
setDate(today)
// 日历逻辑：
// 必须知道当前月的天数，当前月第一天星期几
// 某月的天数
function getMonthDays(momentObj) {
	return momentObj.daysInMonth()
}
// 某月第一天的星期
// startOf 第一天
// weekday 星期几
function getWeekDays(momentObj) {
	return momentObj.startOf("month").weekday()
}
function setDate(m) {
	// 获得当前月的天数  和 第一天的星期数
	let curDays = getMonthDays(m) // 当前天数
	let curWeek = getWeekDays(m.clone()) // 当前月第一天的星期(索引值)
	let upDays = getMonthDays(m.clone().subtract(1, "month")) // 上月的天数
	// 生成的结构
	let strDate = ""
	// 下个月的起始日期
	let nextFirstDate = 0
	for (let i = 0; i < 42; i++) {
		// 1. 当前月的上一个月
		if (i < curWeek) {
			// 返回的索引值刚好是上月在当月显示的天数
			strDate = `
                    <li class="speical">
                        <span></span>
                        <span>${upDays}</span>
                    </li>${strDate}`
			upDays-- // 倒叙显示   30 31
		} else if (i >= curDays + curWeek) {
			//去除掉当月天数+上月天数就是下月天数
			// 2. 当前月的下一个月：除去当月最后一天+上月的几天剩余的是下月开始计算
			// curWeek 返回值刚好是上月占用的天数
			nextFirstDate++
			strDate += `
                    <li class="speical">
                        <span></span>
                        <span>${nextFirstDate}</span>
                    </li>`
		} else {
			// 3. 当前月
			// i-curWeek+1 为当前月的天数
			// date()获取日期号
			// m.date() == i - curWeek + 1说明这一天是当月当天，添加样式
			let currentClass = m.date() == i - curWeek + 1 ? "current" : ""
			if (m.year() != moment().year() || m.month() != moment().month()) {
				currentClass = ""
			}
			strDate += `
                    <li class = ${currentClass}>
                        <span></span>
                        <span>${i - curWeek + 1}</span>
                    </li>`
		}
	}
	timeYM.innerHTML = m.format("YYYY年MM月") // 更新日历头部的年月
	dateList.innerHTML = strDate // 渲染日历
}

//返回箭头
const topPresetBack = document.querySelector(".topPreset a")
topPresetBack.addEventListener("click", function () {
	history.back()
})

const line = document.querySelector(".selected .line")
const topScope = line.offsetTop
const middleScope = topScope + line.offsetHeight / 2
const bottomScope = topScope + line.offsetHeight
//滑动选择年月
const selectedList = document.querySelectorAll(".selected .listbox .list ul")
Transform(selectedList[0])
new AlloyFinger(selectedList[0], {
	pressMove: function (evt) {
		selectedList[0].translateY += evt.deltaY
		selectedList[0].translateY < -288 && (selectedList[0].translateY = -288)
		selectedList[0].translateY > 96 && (selectedList[0].translateY = 96)
	}
})
Transform(selectedList[1])
new AlloyFinger(selectedList[1], {
	pressMove: function (evt) {
		selectedList[1].translateY += evt.deltaY
		selectedList[1].translateY < -432 && (selectedList[1].translateY = -432)
		selectedList[1].translateY > 96 && (selectedList[1].translateY = 96)
	}
})

let timeSetYears = "2023"
let timeSetMonths = "9月"
const yearsList = document.querySelectorAll(
	".selected .listbox .list .years li span"
)
const monthsList = document.querySelectorAll(
	".selected .listbox .list .months li span"
)
let num = 1
selectedList[0].addEventListener("touchmove", function () {
	num = parseInt(
		(96 - selectedList[0].translateY) / parseInt(400 / yearsList.length)
	)
	yearsList.forEach(function (item, index) {
		item.style.color = index == num ? "#000" : "#c2c1c1"
		item.style.fontSize = index == num ? 25 / 37.5 + "rem" : 16 / 37.5 + "rem"
		timeSetYears = index == num ? item.innerText : timeSetYears
	})
})

selectedList[0].addEventListener("touchend", function () {
	selectedList[0].translateY = -num * parseInt(450 / yearsList.length) + 96
})

selectedList[1].addEventListener("touchmove", function () {
	num = parseInt(
		(96 - selectedList[1].translateY) / parseInt(550 / monthsList.length)
	)
	monthsList.forEach(function (item, index) {
		item.style.color = index == num ? "#000" : "#c2c1c1"
		item.style.fontSize = index == num ? 25 / 37.5 + "rem" : 16 / 37.5 + "rem"
		timeSetMonths = index == num ? item.innerText : timeSetMonths
	})
})

selectedList[1].addEventListener("touchend", function () {
	selectedList[1].translateY = -num * parseInt(590 / monthsList.length) + 96
})
//确认选择日期
yes.addEventListener("touchstart", function () {
	// console.log(timeSetYears + "年" + timeSetMonths)
	setDate(
		moment(
			timeSetYears + "-" + timeSetMonths.substring(0, timeSetMonths.length - 1)
		)
	)
	selected.style.opacity = 0
	selected.style.transform = "translateY(100%)"
	screenMask.style.opacity = 0
	screenMask.style.zIndex = -1
})
